<template>
	<view class="car-box">
		<image class="car-img" src="/static/img/car-img.png" mode="aspectFill" style="height: 48px;"></image>
	</view>
</template>

<script>
export default {
	name: 'CarBox'
}
</script>

<style scoped lang="scss">
.car-box {
	position: absolute;
	top: 124px;
	left: 0;
	width: 100%;
	height: 237px;
	background: url(/static/img/car-bg.png) no-repeat;
	background-size: 100% 100%;

	.car-img {
		width: 44px;
		height: 35px;
		position: absolute;
		top: 150px;
		z-index: 5;
		animation: move-car 10s linear infinite;

		&::before {
			position: absolute;
			content: "";
			width: 100%;
			height: 100%;
			left: 0;
			transform: rotate(0deg);
			background: url(/static/img/apple-bg.png);
			background-size: 100% 100%;
		}
	}
}

@keyframes move-car {
	0% {
		top: -18px;
		right: -50px
	}

	4% {
		top: -11px;
		right: -20px
	}

	8% {
		top: 0px;
		right: 0px
	}

	12% {
		top: 18px;
		right: 30px;
		-webkit-transform: rotate(-7deg);
		transform: rotate(-7deg)
	}

	16% {
		top: 34px;
		right: 60px;
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg)
	}

	20% {
		top: 50px;
		-webkit-transform: rotate(-13deg);
		transform: rotate(-13deg);
		right: 80px
	}

	24% {
		top: 67px;
		right: 100px;
		-webkit-transform: rotate(-13deg);
		transform: rotate(-13deg)
	}

	28% {
		top: 83px;
		right: 120px;
		-webkit-transform: rotate(-9deg);
		transform: rotate(-9deg)
	}

	32% {
		top: 100px;
		right: 140px;
		-webkit-transform: rotate(-9deg);
		transform: rotate(-9deg)
	}

	36% {
		top: 113px;
		right: 160px;
		-webkit-transform: rotate(-6deg);
		transform: rotate(-6deg)
	}

	40% {
		top: 126px;
		right: 180px;
		-webkit-transform: rotate(-6deg);
		transform: rotate(-6deg)
	}

	44% {
		top: 135px;
		right: 200px;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	48% {
		top: 143px;
		right: 220px;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	52% {
		top: 151px;
		right: 240px;
		-webkit-transform: rotate(4deg);
		transform: rotate(4deg)
	}

	56% {
		top: 153px;
		right: 260px;
		-webkit-transform: rotate(4deg);
		transform: rotate(4deg)
	}

	60% {
		top: 157px;
		right: 280px;
		-webkit-transform: rotate(8deg);
		transform: rotate(8deg)
	}

	64% {
		top: 160px;
		right: 300px;
		-webkit-transform: rotate(11deg);
		transform: rotate(11deg)
	}

	68% {
		top: 164px;
		right: 320px;
		width: 61px;
		-webkit-transform: rotate(11deg);
		transform: rotate(11deg)
	}

	72% {
		top: 165px;
		right: 340px;
		-webkit-transform: rotate(11deg);
		transform: rotate(11deg)
	}

	76% {
		top: 169px;
		right: 360px;
		-webkit-transform: rotate(11deg);
		transform: rotate(11deg)
	}

	78% {
		top: 167px;
		right: 380px;
		-webkit-transform: rotate(11deg);
		transform: rotate(11deg)
	}

	82% {
		top: 169px;
		right: 400px;
		-webkit-transform: rotate(11deg);
		transform: rotate(11deg)
	}

	86% {
		top: 169px;
		right: 430px;
		-webkit-transform: rotate(11deg);
		transform: rotate(11deg)
	}

	100% {
		top: 169px;
		right: 440px;
		-webkit-transform: rotate(11deg);
		transform: rotate(11deg)
	}
}
</style>